<ion-header>
  <ion-navbar>
    <ion-buttons>
      <button ion-button (click)="closeModal()">关闭</button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
  <ion-row class='flow-list-searchbar' [hidden]="type != 'bank'">
    <ion-col col-10>
      <ion-toolbar no-border-top>
        <ion-searchbar [(ngModel)]="keyWord" color="light" placeholder="存款行内码/存款行名称">
        </ion-searchbar>
      </ion-toolbar>
    </ion-col>
    <ion-col col-2>
      <button ion-button class="search-button" (click)="search()">查询</button>
    </ion-col>
  </ion-row>
</ion-header>
<ion-content class="funds">

  <ion-refresher (ionRefresh)="doRefresh($event)" *ngIf="type === 'bank'">
    <ion-refresher-content pullingText="下拉刷新" refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-list *ngIf="!isNoMoreData && dataList && dataList.length > 0" [hidden]="type != 'bank'">
    <div *ngFor="let data of dataList">
      <ion-item *ngIf="data.l_plan_no != '0'">
        <ion-label style="white-space: pre-wrap;">{{data.l_bank_no}}|{{data.vc_bank_short}}</ion-label>
        <ion-radio value="data.l_bank_no" (ionSelect)="radioSelected(data)"></ion-radio>
      </ion-item>
    </div>
  </ion-list>
  <ion-item-divider class='list-no-more-tips' color="light" [hidden]="isLoadMore || type != 'bank'">
    暂无更多数据...
  </ion-item-divider>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="type === 'bank'">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <div [hidden]="type != 'money'" class="funds-detail-msg" id="circulateContent">
    <ion-row responsive-sm>
      <ion-col col-7 class="funds-left">
        <ion-list [hidden]="dataList.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p item-left>定存账号</p>
          </ion-item-divider>
          <div class="GridLeft" *ngFor="let result of dataList">
            <ion-item class="funds-name-item" (click)="radioSelected(result)">
              <p item-left class="funds-name">
                <span class="funds-layout-flex GridFundName set-fund-name-color">
                  {{result.vc_account_no}}
                </span>
              </p>
            </ion-item>
          </div>
        </ion-list>
      </ion-col>
      <ion-col col-5 class="funds-right">
        <ion-list [hidden]="dataList.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="gridRight_Deposit">
          <ion-scroll scrollX="true" class="item-wrap" #gridRight_Deposit>
            <ion-item-divider id="GridTitle_Deposit" class="fund-right-header">
              <p item-left class="odd_header" >
                账号名称
              </p>
              <p item-left class="odd_header" >
                存款行
              </p>
              <p item-left class="odd_header" >
                存款金额
              </p>
              <p item-left class="odd_header" >
                定存利率
              </p>
              <p item-left class="odd_header" >
                提前支取利率
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let field of dataList">
                <ion-item (click)="radioSelected(field)">
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.vc_account_name}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.vc_minor_bank}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.en_balance}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.en_rate}}</span>
                  </p>
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p">
                    <span>{{field.en_advance_rate}}</span>
                  </p>
                </ion-item>
              </div>
            </div>
          </ion-scroll>
        </ion-list>
      </ion-col>
    </ion-row>
  </div>
</ion-content>
